<template>
  <div id="add-comment">
    <div class="info">
      <el-input class="w-400" v-model="addCommentForm.commentQQ" placeholder="请输入QQ号"></el-input>
      <i @click="getInfoByQQ" class="el-icon-circle-plus-outline fz-40 cursor-pointer"></i>
      <div class="w-40 h-40 m-r-10">
        <img width="40" class="border-r" v-if="addCommentForm.commentIcon" :src="addCommentForm.commentIcon" alt="头像">
        <i v-else class="el-icon-picture-outline-round fz-40"></i>
      </div>
      <el-input class="w-400 m-r-10" v-model="addCommentForm.commentName" placeholder="自动获取昵称"></el-input>
      <el-input v-model="addCommentForm.commentEmail" placeholder="自动添加邮箱"></el-input>
    </div>
    <el-input
      class="m-t-10 m-b-10"
      type="textarea"
      placeholder="请输入文章评论"
      v-model="addCommentForm.commentContent"
      maxlength="40"
      show-word-limit
      rows="5"
    ></el-input>
    <el-button class="W100" @click="addComment">发表评论</el-button>   
  </div>
</template>

<script>
export default {
  data() {
    return {
      addCommentForm: {
        commentArticleId: '',
        commentQQ:'',
        commentEmail:'',
        commentName: '',
        commentIcon: '',
        commentContent:'',
      }
    }
  },
  props: {
    'ArticleId': {
      require: true
    }
  },
  created() {
    this.addCommentForm.commentArticleId = this.$route.params.id
  },
  watch: {
    '$route.params.id'() {
      this.addCommentForm.commentArticleId = this.$route.params.id
    }
  },
  methods: {
    async getInfoByQQ() {
      let res = await this.api.get('https://users.qzone.qq.com/fcg-bin/cgi_get_portrait.fcg', {
        params: {
          uins: this.addCommentForm.commentQQ,
          // size: 100
        }
      })
      if(res.code == 200) {
        this.addCommentForm.commentIcon = res.imgurl
        this.addCommentForm.commentName = res.name
        this.addCommentForm.commentEmail = res.qq + '@qq.com' 
        console.log(this.addCommentForm)
      }else {
        this.$message({message: 'QQ号无效', type: 'warning', showClose: true, });  
      }
    },
    async addComment() {
      if(this.addCommentForm.commentContent == '') {
        this.$message({ message: '评论内容不能为空', type: 'warning', showClose: true, });
      }else {
        console.log(this.addCommentForm)
        let res = await this.api.post('/client/addComment',{
          ...this.addCommentForm
        })
        if(res.code == 0) {
          this.$emit('getNewList')
          this.addCommentForm.commentContent = ''
          this.$message({message: res.message, type: 'success', showClose: true, })
        }
      }
    }
  },
}
</script>

<style lang="scss">
#add-comment {
  border-top: 1px solid #DCDFE6;
  padding-top: 20px;
  .info {
    display: flex;
  }
}
</style>